<template>
  <view class="detail">
    <view class="flxbg" :style="{'background-image': 'url('+ songDetail.al.picUrl +')'}"></view>
      <music-head :show="true" :title="songDetail.name" color="white"/>
      <view class="container" v-show="!isLoading">
        <scroll-view scroll-y="true">
          <netease-info  :show="true" title="网易云音乐" color="white"/>
          <!-- 播放器 -->
          <view class="detail-play" @tap="handleToPlay">
            <image :src="songDetail.al.picUrl" :class="{ 'detail-play-run': isPlayRotate }"></image>
            <text class="iconfont" :class="isPlay ? 'icon-24gl-pauseCircle' : 'icon-bofang'"></text>
            <view></view>
          </view>
          <!-- /播放器 -->
          <!-- 歌词 -->
          <view class="detail-lyric">
            <view class="detail-lyric-wrap" :style="{ transform : 'translateY('+ -(lyricIndex - 1) * 80 +'rpx)' }">
              <view
                :class="{active : lyricIndex === index}"
                v-for="(item, index) in songLyric"
                :key="index"
              >{{ item.lyric }}</view>
            </view>
          </view>
          <!-- /歌词 -->
          <!-- 喜欢 -->
          <view class="detail-like">
            <view class="detail-like-head">喜欢这首歌的人也听</view>
            <view
              class="detail-like-item"
              v-for="(song, index) in songs"
              :key="index"
              @tap="handleToSimi(song.id)"
            >
              <image :src="song.album.picUrl"></image>
              <view class="detail-item-info">
                <view class="detail-item-name">{{ song.name }}</view>
                <view class="detail-item-title"><text class="sq" v-if="song.privilege.maxbr === 999000"></text>{{ song.artists[0].name }} - {{ song.album.name }}</view>
              </view>
              <text class="iconfont icon-24gl-playCircle detail-item-control"></text>
            </view>
          </view>
          <!-- /喜欢 -->
          <!-- 评论 -->
          <view class="detail-comment">
            <view class="detail-comment-head">精彩评论</view>
            <view
              class="detail-comment-item"
              v-for="(comment, index) in hotComments"
              :key="index"
            >
              <image :src="comment.user.avatarUrl"></image>
              <view class="detail-comment-info">
                <view class="detail-info-head">
                  <view class="detail-info-title">
                    <view class="detail-info-name">{{ comment.user.nickname }}</view>
                    <view class="detail-info-time">{{ comment.time | formatTime }}</view>
                  </view>
                  <view class="detail-info-zan">{{ comment.likedCount | formatCount }} <text class="iconfont icon-dianzan"></text></view>
                </view>
                <view class="detail-info-part">{{ comment.content }}</view>
              </view>
            </view>
          </view>
          <!-- /评论 -->
          <!-- /包裹容器 -->
        </scroll-view>
      </view>
    </view>
  </view>  
</template>

<script>
  import musicHead from '@/components/musicHead/musicHead.vue'
  import neteaseInfo from '@/components/neteaseInfo/neteaseInfo.vue'
  import { getSongDetails, getSimiSong, getCommentMusic, getLyric, getSongUrl } from '@/common/api.js'
  export default {
    name: "DetailIndex",
    data() {
      return {
        songDetail: {
          name: '',
          al: {
            picUrl: ''
          }
        },
        songs: [],
        hotComments: {},
        songLyric: [],
        lyricIndex: 0,
        isPlay: true,
        isPlayRotate: true,
        isLoading: true
      }
    },
    components: {
      musicHead,
      neteaseInfo
    },
    onLoad (options) {
      this.loadMusic(options.id)
    },
    onUnload () {
      this.cancelLyricIndex()
      // #ifdef H5
      this.bgAudioManager.destroy()
      // #endif
    },
    onHide () {
      this.cancelLyricIndex()
      // #ifdef H5
      this.bgAudioManager.destroy()
      // #endif
    },
    methods: {
      loadMusic (id) {
        this.$store.commit('NEXT_ID', id)
        uni.showLoading({
          title: '加载中...'
        })
        this.isLoading = true
        Promise.all([ getSongDetails(id), getSimiSong(id), getCommentMusic(id), getLyric(id), getSongUrl(id) ]).then(res => {
          if (res[0].data.code === 200) {
            this.songDetail = res[0].data.songs[0]
            this.songDetail.name =  res[0].data.songs[0].name
            this.songDetail.al.picUrl =  res[0].data.songs[0].al.picUrl
          }
          if (res[1].data.code === 200) {
            this.songs = res[1].data.songs
          }
          if (res[2].data.code === 200) {
            this.hotComments = res[2].data.hotComments
          }
          if (res[3].data.code === 200) {
            let lyric = res[3].data.lrc.lyric
            let re = /\[([^\]]+)\]([^\[]+)/g
            let result = []
            lyric.replace(re, ($0, $1, $2) => {
              result.push({"time": this.formatTimeToSec($1), "lyric": $2})
            })
            this.songLyric = result
          }
          if (res[4].data.code === 200) {
            // #ifdef MP-WEIXIN
            this.bgAudioManager = uni.getBackgroundAudioManager()
            this.bgAudioManager.title = this.songDetail.name
            // #endif
            // #ifdef H5
            if (!this.bgAudioManager) {
              this.bgAudioManager = uni.createInnerAudioContext()
            }
            this.isPlay = false
            this.isPlayRotate = false
            // #endif
            this.bgAudioManager.src = res[4].data.data[0].url
            this.listenLyricIndex()
            this.bgAudioManager.onPlay(() => {
              this.isPlay = true
              this.isPlayRotate = true
              this.listenLyricIndex()
            })
            this.bgAudioManager.onPause(() => {
              this.isPlay = false
              this.isPlayRotate = false
              this.cancelLyricIndex()
            })
            this.bgAudioManager.onEnded(() => {
              this.loadMusic(this.$store.state.nextId)
            })
          }
          
          this.isLoading = false
          uni.hideLoading()
        })
      },
      
      formatTimeToSec (value) {
        let arr = value.split(':')
        return (Number(arr[0] * 60) + Number(arr[1])).toFixed(1)
      },
      
      handleToPlay () {
        if (this.bgAudioManager.paused) {
          this.bgAudioManager.play()
          this.isPlay = true
          this.isPlayRotate = true
        } else {
          this.bgAudioManager.pause()
          this.isPlay = false
          this.isPlayRotate = false
        }
      },
      
      listenLyricIndex () {
        clearInterval(this.timer)
        this.timer = setInterval(() => {
          for (let i = 0; i < this.songLyric.length; i++) {
            if (this.bgAudioManager.currentTime > this.songLyric[this.songLyric.length - 1].time) {
              this.lyricIndex = this.songLyric.length - 1
              break
            }
            if (this.bgAudioManager.currentTime > this.songLyric[i].time && this.bgAudioManager.currentTime < this.songLyric[i + 1].time) {
              this.lyricIndex = i
            }
          }
        }, 500)
      },
      
      cancelLyricIndex () {
        clearInterval(this.timer)
      },
      
      handleToSimi (songId) {
        this.loadMusic(songId)
      }
    }
  }
</script>

<style scoped>
  /* 播放器 */
  .detail-play {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 575upx;
    height: 575upx;
    background: url(@/static/images/disc.png) no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
    margin: 204upx auto 0;
  }
  .detail-play image {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 368upx;
    height: 368upx;
    margin: auto;
    border-radius: 50%;
    animation: 10s infinite move linear;
    animation-play-state: paused;
  }
  .detail-play .detail-play-run {
    animation-play-state: running;
  }
  .detail-play text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 104upx;
    height: 104upx;
    margin: auto;
    font-size: 104upx;
    color: #fff;
  }
  .detail-play view {
    position: absolute;
    right: 112upx;
    top: -180upx;
    width: 214upx;
    height: 340upx;
    margin: auto;
    background: url(@/static/images/needle.png) no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
  }
  /* /播放器 */
  /* 歌词 */
  .detail-lyric {
    height: 240upx;
    text-align: center;
    overflow: hidden;
  }
  .detail-lyric-wrap {
    transition: 0.5s;
  }
  .detail-lyric-wrap view {
    height: 80upx;
    line-height: 80upx;
    font-size: 30upx;
    color: #999;
  }
  .detail-lyric-wrap .active {
    color: #fff;
  }  
  /* /歌词 */
  /* 喜欢 */
  .detail-like {
    margin: 0 32upx;
  }
  .detail-like-head {
    font-size: 32upx;
    color: #fff;
    margin: 60upx 0;
  }
  .detail-like-item {
    display: flex;
    height: 82upx;
    margin-bottom: 40upx;
  }
  .detail-like-item image {
    width: 82upx;
    height: 82upx;
    border-radius: 20upx;
    margin-right: 22upx;
  }
  .detail-item-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    width: 510upx;
    height: 82upx;
  }
  .detail-item-name {
    font-size: 28upx;
    color: #fff;
    width: 510upx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .detail-item-name .detail-info-member {
    width: 54upx;
    height: 18upx;
  }
  .detail-item-title {
    display: flex;
    align-items: center;
    font-size: 20upx;
    color: #9d9ea0;  
    width: 510upx;  
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .detail-item-title .sq {
    display: inline-block;
    width: 24upx;
    height: 16upx;
    background-image: url("~@/static/images/sq.png");
    -webkit-background-size: cover;
    background-size: cover;
    margin-right: 6upx;
  }
  .detail-item-control {
    margin-left: 22upx;
    font-size: 50upx;
    color: #9d9ea0;
    height: 82upx;
    line-height: 82upx;
  }
  /* /喜欢 */
  /* 评论 */
  .detail-comment {
    margin: 0 32upx;
  }
  .detail-comment-head {
    margin: 38upx 0;
    color: #fff;
  }
  .detail-comment-item {
    display: flex;
    margin-bottom: 30upx;
  }
  .detail-comment-item image {
    width: 62upx;
    height: 62upx;
    border-radius: 50%;
    margin-right: 20upx;
  }
  .detail-comment-info {
    width: 604upx;
    padding-bottom: 20upx;
    border-bottom: 1upx solid #999;
  }
  .detail-info-head {
    display: flex;
    justify-content: space-between;
    width: 604upx;
    margin-bottom: 10upx;
  }
  .detail-info-title {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .detail-info-name {
    font-size: 22upx;
    color: #9d9ea0;
  }
  .detail-info-time {
    font-size: 16upx;
    color: #545459;
  }
  .detail-info-zan {
    color: #6d6d71;
    font-size: 18upx;
  }
  .detail-info-zan text {
    font-size: 30upx;
    margin-left: 10upx;
  }
  .detail-info-part {
    font-size: 26upx;
    color: #fff;
    line-height: 42upx;
  }
  /* /评论 */
  
  /* 旋转动画 */
  @keyframes move{
    from{
      transform: rotate(0deg)
    }
    to{
      transform: rotate(360deg)
    }
  }
</style>
